<template>
  <div class='container'>
     <el-card  body-style="{ position:absolute ; }">
      <!-- 筛选器 -->
      <QuestionsFiltrate ref="filte"/>
      <!-- 列表 -->
        <!-- 表头 -->
      <el-tabs type="card" v-model="chkState" @tab-click="handerClick">
          <el-tab-pane label="全部" name="all"/>
          <el-tab-pane label="待审核" name="0"/>
          <el-tab-pane label="已审核" name="1" />
          <el-tab-pane label="已拒绝" name="2"/>
       <!-- 数量区域 -->
       <el-alert :title="`数据一共${title}条`" type="info" show-icon>
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="tableList" style="width: 100%" >
      <el-table-column prop="number" label="实体编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="105">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="103" >
      </el-table-column>
      <el-table-column label="题型" width="103">
        <template #default="{row}">
        {{ trunList(row,'questionType')}}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280">
         <template #default="{row}">
        <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template #default="{row}">
        {{ trunList(row,'addDate')}}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="103">
        <template #default="{row}">
        {{ trunList(row,'difficulty')}}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column  label="审核状态" width="100">
        <template #default="{row}">
        {{ trunList(row,'chkState')}}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column  label="发布状态" width="100">
           <template #default="{row}">
            {{ trunList(row,'publishState')}}
          </template>
      </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
         <template #default="{row}">
          <el-row :gutter="20" >
            <el-col :span="5"><el-button size="mini"  type="text" @click="lookVisible(row.id)">预览</el-button></el-col>
            <el-col :span="5"><el-button size="mini"  type="text" @click="ShowVisible(row.id)" :disabled="!ISshowAudit(row)"  >审核</el-button></el-col>
            <el-col :span="5"><el-button size="mini"  type="text" @click="$router.push(`/questions/new?id=${row.id}`)">修改</el-button></el-col>
            <el-col :span="5"><el-button size="mini"  type="text" @click="POSTchoicePublish(row)" >{{ShowpublishState(row.publishState)}}</el-button></el-col>
            <el-col :span="4"><el-button size="mini"  type="text" @click="choiceAdd(row.id)">删除</el-button></el-col>
          </el-row>
        </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromData.page"
          :page-sizes="[2,3,4,5]"
          :page-size="fromData.pagesize"
          layout="total,  prev, pager, next,sizes, jumper"
          :total="title">
        </el-pagination>
        </el-tabs>
    </el-card>
    <QuestionsPiece  ref="preview" />
    <!-- 审核弹框 -->
    <el-dialog
      title="题目审核"
      :visible="XXVisible"
      @close="NOshowVisible()"
      width="30%" :close-on-click-modal="false">
      <el-form :model="FormchoiceCheck" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top" size="small">
          <el-form-item >
              <el-radio v-model="FormchoiceCheck.chkState" label="1">通过</el-radio>
              <el-radio v-model="FormchoiceCheck.chkState" label="2">拒绝</el-radio>
          </el-form-item>
         <el-form-item  prop="chkRemarks">
          <el-input type="textarea" v-model="FormchoiceCheck.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 确认取消按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="NOshowVisible()">取 消</el-button>
        <el-button type="primary" @click="GETauditOpinions()">确 定</el-button>
      </span>
  </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import QuestionsFiltrate from '../components/questions-filtrate.vue'
import QuestionsPiece from '../components/questions-piece.vue'
import { choice as getChoiceAPI, choiceAdd as choiceAddAPI, choiceCheck as PostchoiceCheckAPI, choicePublish as POSTchoicePublishAPI } from '@/api/hmmm/questions'
import { difficulty as getDifficulty, questionType as getQuestionType, chkType as getChkType } from '@/api/hmmm/constants'
export default {
  components: {
    QuestionsFiltrate,
    QuestionsPiece
  },
  data () {
    return {
      chkState: 'all', // 表头默认选项
      tableList: [],
      fromData: {
        page: 1,
        pagesize: 5
      },
      title: 0,
      pages: 0,
      dialogVisible: false,
      XXVisible: false,
      // 题目审核内容
      FormchoiceCheck: {
        chkState: '1',
        chkRemarks: '',
        id: ''
      },
      rules: {
        chkRemarks: [
          { required: true, message: '请输入审核意见', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 列表显示上下架
     */
    ShowpublishState (state) {
      if (state === 1) {
        return '下架'
      } else if (state === 0) {
        return '上架'
      }
    },
    /**
     * 上架下架点击事件
     */
    POSTchoicePublish (row) {
      if (row.publishState === 1) {
        this.$confirm('您确认下架这道题目吗?', '提示').then(async () => {
          await POSTchoicePublishAPI({ id: row.id, publishState: 0 })
          this.$message.success('下架成功')
          this.getTableData()
        }).catch(() => {})
      } else if (row.publishState === 0) {
        this.$confirm('您确认上架这道题目吗?', '提示').then(async () => {
          await POSTchoicePublishAPI({ id: row.id, publishState: 1 })
          this.$message.success('上架成功')
          this.getTableData()
        }).catch(() => {})
      }
    },
    /**
     * 是否显示审核
     */
    ISshowAudit (data) {
      return data.chkState === 0
    },
    /**
     * 关闭审核弹框
     */
    NOshowVisible () {
      this.XXVisible = false
      this.FormchoiceCheck = {}
      this.$refs.ruleForm.resetFields()
    },
    /**
     * 显示审核弹框
     */
    ShowVisible (id) {
      console.log(id)
      this.XXVisible = true
      this.FormchoiceCheck = {
        chkState: '1',
        chkRemarks: ''
      }
      this.FormchoiceCheck.id = id
    },
    /**
     * 审核提交
     */
    GETauditOpinions () {
      this.$refs.ruleForm.validate(async (flag) => {
        console.log(flag)
        if (!flag) return
        this.FormchoiceCheck.chkState = +this.FormchoiceCheck.chkState
        await PostchoiceCheckAPI(this.FormchoiceCheck)
        this.$message.success('操作成功')
        this.NOshowVisible()
        this.getTableData()
      })
    },
    /**
     * 删除精选题
     */
    async choiceAdd (id) {
      this.$confirm('此操作将题目删除精选, 是否继续?', '提示').then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await choiceAddAPI({ id: id, choiceState: 0 })
        // console.log(res)
        this.getTableData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败'
        })
      })
    },
    /**
     * 显示查看弹框
     */
    lookVisible (id) {
      this.$refs.preview.dialogVisible = true
      this.$refs.preview.getDetail(id)
    },
    /**
     * 获取表格列表
     */
    async getTableData (data) {
      if (this.chkState === 'all') {
        const { data: res } = await getChoiceAPI(this.fromData)
        this.title = res.counts
        this.tableList = res.items
        this.pages = res.pages
      } else {
        const { data: res } = await getChoiceAPI({ ...this.fromData, chkState: this.chkState })
        this.title = res.counts
        this.tableList = res.items
        this.pages = res.pages
      }
    },
    /**
     * 改变条数触发
     */
    handleSizeChange (val) {
      this.fromData.pagesize = val
      this.fromData.page = 1
      this.getTableData()
    },
    /**
     * 改变页数触发
     */
    handleCurrentChange (val) {
      this.fromData.page = val
      this.getTableData()
    },
    /**
     * 表头change事件
     */
    handerClick () {
      this.fromData.page = 1
      if (this.chkState === 'all') {
        this.getTableData()
      } else {
        this.getTableData({ chkState: this.chkState })
      }
    },
    /**
     * 转换列表内容
     */
    trunList (data, val) {
      if (val === 'questionType') {
        const res = getQuestionType.find(item => item.value === +data.questionType)
        return res.label
      } else if (val === 'difficulty') {
        const res = getDifficulty.find(item => item.value === +data.questionType)
        return res.label
      } else if (val === 'addDate') {
        const date = dayjs(data.addDate).format('YYYY-MM-DD')
        return date
      } else if (val === 'chkState') {
        const res = getChkType.find(item => item.value === +data.chkState)
        return res?.label
      } else if (val === 'publishState') {
        if (data.publishState === 1 && data.chkState === 1) {
          return '已发布'
        } else if (data.publishState === 0 && data.chkState === 1) {
          return '已下架'
        } else {
          return '待发布'
        }
      }
    }
  },
  created () {
    this.getTableData()
  }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 15px 10px ;
  ::v-deep{
      .cell{
        // margin-left: 0px;
        .el-col{
           padding: 0 !important;
           text-align: center;

        }

      }
     .el-pagination{
     text-align: right;
     .el-pagination__total{
      display: none;
     }
    }
  }
}
</style>
